<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
 <head>
     <title>model</title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <meta http-equiv="content-language" content="zh-cn" />
     <style type="text/css教程" media="all">
         div { width:80%;margin:auto; }
         table { margin:15px 0; }
         th, tr { width:20%; }/* 修改这里，如果表格有三列就是33.333%，四列就是25% */
         span { display:block;line-height:100%; }/* 使点击整个单元格都有效果 */
         table input { width:98%; }
         table a { float:left; margin:0 3px; }
     </style>
 <script type="text/javascript">
 //<![cdata[
 var jcrud=function(tb,colnum,saveallbtn,add,ajaxsaver,allajaxsaver,ajaxdeler){
     var del = tb.getelementsbytagname('a');
     var span = tb.getelementsbytagname('span');
     var ctr=[];/* 保存修改的tr对象 */
     var delevent = function(){
         var dder = this.parentnode.parentnode;
         this.data=[];
         for(var i=0; i<dder.children.length-1; i++)
             this.data[i] = dder.children[i].children[0].firstchild.nodevalue;
         var tag = 0;
         for(var j=0; j<this.data.length; j++){
             if(this.data[j]!=='null'){/* 如果修改了单元格的默认值，这里也做相应修改 */
                 tag=1;
                 break;
             }
         }
         for(var k=0; k<ctr.length; k++) if(ctr[k]===dder) ctr.splice(k,1);
         dder.parentnode.removechild(dder);
         if(tag==1) ajaxdeler.call(this);
     };
     var spanevent = function(){/* 点击生成修改框 */
         var value = this.firstchild.nodevalue;
         var input = document.createelement('input');
         input.value = value;
         this.parentnode.appendchild(input);
         this.parentnode.removechild(this);
         input.focus();
         input.onblur = function(){/* 失去焦点移除修改框 */
             var span = document.createelement('span');
             span.appendchild(document.createtextnode(this.value?this.value:'null'));/* 如果修改了单元格的默认值，这里也做相应修改 */
             span.onclick =spanevent;
             this.parentnode.appendchild(span);
             this.parentnode.removechild(this);
             if(value!=this.value){/* 如果内容改变生成保存按钮 */
                 var tr = span.parentnode.parentnode
                     tds = tr.children;
                     btns = tds[colnum-1].getelementsbytagname('a');
                 for(var i=0; i<btns.length; i++){
                     if(btns[i].firstchild.nodevalue!='保存'){
                         var saver = document.createelement('a');
                         saver.href="javascript:;";
                         saver.appendchild(document.createtextnode('保存'));
                     }else{
                         var saver = btns[i];
                     }
                 }
                 tds[tds.length-1].appendchild(saver);
                 var tag=0;
                 for(var k=0; k<ctr.length; k++)
                     if(ctr[k]===tr) tag=1;
                 if(tag==-0) ctr.push(tr);
                 saver.onclick=function(){/* 添加保存处理事件 */
                     this.data = [];
                     for(var i=0; i<tds.length-1; i++)
                         this.data[i] = this.parentnode.parentnode.children[i].children[0].firstchild.nodevalue;
                     ajaxsaver.call(this);
                     for(var i=ctr.length-1; i>=0; i--){
                         if(this.parentnode.parentnode===ctr[i]){
                             ctr.splice(i,1);
                         }
                     }
                     this.parentnode.removechild(this);
                 };
             }
         }
     };
     for(var i in del) del[i].onclick = delevent;/* 给现在有元素添加事件 */
     for(var j in span) span[j].onclick = spanevent;
     add.onclick = function(){
         var tbody = tb.children[0];
         var tr = document.createelement('tr');
         for(var j=0; j<colnum; j++){
             var td = document.createelement('td');
             if(j==(colnum-1)){
                 var del = document.createelement('a');
                 del.href='javascript:;';
                 del.appendchild(document.createtextnode('删除'));
                 del.onclick = delevent;/* 给新加元素添加事件 */
                 td.appendchild(del);
             }else{
                 var span = document.createelement('span');
                 span.appendchild(document.createtextnode('null'));/* 如果在添加时修改默认值，在这里修改的 */
                 td.appendchild(span);
                 span.onclick =spanevent;
             }
             tr.appendchild(td);
         }
         tbody.appendchild(tr);
     };
     var getalldata = function(){/* 保存全部的数据解析 */
         var alldata=[];
         for(var i=0; i<ctr.length; i++){
             alldata[i]=[];
             for(var j=0; j<ctr[i].children.length-1; j++)
                 alldata[i].push(ctr[i].children[j].children[0].firstchild.nodevalue);
             ctr[i].children[colnum-1].removechild(ctr[i].children[colnum-1].children[1]);
         }
         ctr=[];
         return alldata;
     };
     saveallbtn.onclick = function(){/* 添加保存全部数据保存事件 */
         this.alldata = getalldata();
         if(this.alldata.length){
             allajaxsaver.call(this);
         }else{
             alert('no data!');
         }
     };
     window.onbeforeunload = function(){/* 刷新提示保存数据 */
         if(ctr.length){
             var y = confirm('数据还未保存，是否保存数据？')
             if(y){
                 saveallbtn.click();
             }
         }
     };
 };
 window.onload = function(){
     var table = document.getelementbyid('tb'),/* 要操作的表格 */
         colnum =5,/* 这里修改表格的列数 */
         saveallbtn = document.getelementbyid('saveall'),/* 保存全部的按钮 */
         addbtn = document.getelementbyid('add'),/* 添加的按钮 */
         saver = function(){
             /* 此处可以加上ajax效果与数据库教程交互 data是个数组，需要可以改成json */
             alert('要传的数据为data数据："'+this.data+'"此处调用ajax实现后台保存！实现略……');
         },
         allsaver = function(){
             /* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成json */
             alert('要传的数据为alldtat数组："'+this.alldata+'"此处调用ajax实现后台保存！实现略……');
         },
         deler = function(){
             /* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成json */
             alert('要传的数据为data数据："'+this.data+'"此处调用ajax实现后台删除！实现略……');
         };
     window.jcrud(table,colnum,saveallbtn,addbtn,saver,allsaver,deler);
 };
 //]]>
 </script>
 </head>
 <body>
     <div>
         <table width="100%" border="1" id="tb">
             <tr><!-- 修改这里有多少列就加多少个th元素 -->
                 <th>a</th>
                 
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><a href="javascript:;">del</a></td>
                 
                 <th>b</th>
                 
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><a href="javascript:;">del</a></td>
                 
                 <th>c</th>
                 
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><a href="javascript:;">del</a></td>
                 
                 <th>d</th>
                 
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><a href="javascript:;">del</a></td>
                 
                 <th>操作</th>
                 
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><a href="javascript:;">del</a></td>
                 
             </tr>
             <!-- 下面为数据的格式的例子，只有这种格式才能保证与js的正确交互 -->
             <!--
             <tr>
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><span>null</span></td>
                 <td><a href="javascript:;">del</a></td>
             </tr>
             -->
         </table>
         <input type="button" id="saveall" value="保存全部" />
         <input type="button" id="add" value="添加" />
         <div style="border:3px red double;padding:2px 3px;margin:8px;">
             <h4 style="color:red;margin:3px;">tip：</h4>
             <ul style="margin:0;">
                 <li>点击添加按钮可以添加一个空的可以修改的记录。</li>
                 <li>点击表格单元格可以修改文本。</li>
                 <li>修改后实现了保存的接口。</li>
                 <li>如果添加了新的记录而未做任何修改值都为null，保存全部时将被忽略。</li>
                 <li>保存全部时只保存修改过的值，原有的数据不再重复保存。</li>
                 <li>刷新时如果数据未保存则提示保存。</li>
                 <li>点击删除时如果是临时添加的无效数据则直接删除，如果保存过的记录则实现了记录删除的接口。</li>
             </ul>
         </div>
     </div>
 </body>
 </html>